<template>
    <div class="proportionofregionalalarms">
        <base-echart ref="chartRef" :show-no-data="true" :options="state.proportionofregionalalarms" height="230" />
    </div>
</template>

<script setup lang="ts">
import { getGeneralValues } from '@/api/general';
import { proportionofregionalalarms } from './config/config'
import { reactive, ref, computed, nextTick, onMounted, defineExpose, onUnmounted } from 'vue'

import { cloneDeep } from 'lodash-es'
import { useIds } from '@/stores/screen/ids';
const { getsessionStorage } = useIds();
const state = reactive<any>({ proportionofregionalalarms })
const initDataOption = {
    // legend: { data: [] as any },
    series: { data: [] as any }
}

const codeData = [
    { name: '违规下车识别', code: "AI_ALERT_DRIVER_OUT_CAR_TODAY" },
    { name: '吸烟识别', code: "AI_ALERT_SOMKE_TODAY" },
    { name: '安全帽识别', code: "AI_ALERT_HELMET_TODAY" },
    { name: '入侵识别', code: "AI_ALERT_REGIONAL_INTRUSION_TODAY" },
]

const chartsData = []
let resData = []
const initData = async () => {
    let reqData = []
    codeData.forEach((item: any) => {
        reqData.push({ code: item.code, params: { equipmentIds: getsessionStorage() } })
    })

    await getGeneralValues(reqData).then((res) => {
        resData = []
        codeData.forEach((item: any) => {

            if (!res.data[item.code]) {
                resData.push({ name: item.name, value: 0 })
            } else {
                resData.push({ name: item.name, value: res.data[item.code].data })
            }
            // chartsData.push(item.name)
        })
        // console.log(chartsData)
        formatOptions(resData)

    })

}
const getChartsData = async () => {
    await initData()

}
const formatOptions = (data: any) => {
    const dataOption = cloneDeep(initDataOption)
    data.forEach((item: any) => {
        dataOption.series.data.push({
            name: item.name,
            value: item.value
        })
    })
    dataOption.series.data = data

    // valueData.forEach((item: any) => {
    //   valueData.series.data.push({
    //     value: item
    //   })
    // })

    nextTick(() => {
        state.proportionofregionalalarms = dataOption
    })
}
const pollingTimer = ref()
const setPollingTimer = () => {
    pollingTimer.value && clearInterval(pollingTimer.value)
    pollingTimer.value = setInterval(() => {
        getChartsData()
    }, 30000)
}
onMounted(() => {
    // getChartsData()
    // setPollingTimer()
})
onUnmounted(() => {
    pollingTimer.value && clearInterval(pollingTimer.value)
})
defineExpose({
    updateData: getChartsData
})
</script>

<style scoped lang="scss">
.proportionofregionalalarms {

    padding: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    font-weight: 600;
}
</style>